<template>
  <div class="p-3">
    <div class="position-relative mb-2">
      <div class="header-title">徐工农机立体仓库数据看板</div>
      <a href="#" class="position-absolute header-warehouse" @click.prevent="exit_()">{{ warehouse }}</a>
      <span class="position-absolute header-time">{{ datetimeInfo }}</span>
    </div>

    <div class="d-flex mb-2 bgcolor-dark" style="height: 5.5rem;">
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">今日任务</div>
        <div class="text-primary fw-bold fs-1 text-center" ><p class="first-text-color">{{ transDailySummaryData.worktotal }}</p></div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已入库</div>
        <div class="text-primary fw-bold fs-1 text-center"><p class="first-text-color">{{ transDailySummaryData.receivetotal }}</p></div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已出库</div>
        <div class="text-primary fw-bold fs-1 text-center"><p class="first-text-color">{{ transDailySummaryData.shiptotal }}</p></div>
      </div>
      <div class="py-2 border-start border-primary" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">总库位</div>
        <div class="text-primary fw-bold fs-1 text-center"><p class="first-text-color">{{ storageWarehouseSummaryData.total }}</p></div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已用库位</div>
        <div class="text-primary fw-bold fs-1 text-center"><p class="first-text-color">{{ storageWarehouseSummaryData.workalltotal }}</p></div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">可用库位</div>
        <div class="text-primary fw-bold fs-1 text-center"><p class="first-text-color">{{ storageWarehouseSummaryData.freetotal }}</p></div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">空容器</div>
        <div class="text-primary fw-bold fs-1 text-center"><p class="first-text-color">{{ storageWarehouseSummaryData.workepaltotal }}</p></div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">作业中</div>
        <div class="text-primary fw-bold fs-1 text-center"><p class="first-text-color">{{ storageWarehouseSummaryData.worktasktotal }}</p></div>
      </div>
    </div>

    <div class="row gx-2" style="height: calc(100vh - 11.5rem)">
      <div class="col-3" style="height: 100%;">
        <div class="bgcolor-dark mb-2" style="height: calc((100% - 0.5rem)/2)">
          <div class="text-white text-center fw-bolder border-bottom border-dark"
            style="height: 2.6rem;line-height: 2.6rem;">作业中订单
          </div>
          <div ref="worklistRef" class="carousel slide overflow-hidden" style="height: calc(100% - 2.6rem);">
            <div class="carousel-inner">
              <div v-for="chunk, index in worklistChunk" class="carousel-item" :class="{ 'active': index == 0 }">
                <div v-for="item in chunk" :key="item.documentnumber" class="text-white px-1 py-2 d-flex">
                  <div><svg class="bi text-primary">
                      <use href="#record-fill" />
                    </svg></div>
                  <div class="ms-1">
                    <div>{{item.refdocumentnumber}},{{item.sortationLocationCode!=null?item.sortationLocationCode:'-'}},{{item.notes!=null?item.notes:'-'}}<span v-if="item.workstatus == 'IMMD'"
                        class="badge text-bg-danger ms-1">加急</span></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-indicators carousel-indicators-custom">
              <template v-for="chunk, index in worklistChunk">
                <button type="button" :data-bs-slide-to="index" :class="{ 'active': index == 0 }"></button>
              </template>
            </div>
          </div>
        </div>
        <div class="bgcolor-dark" style="height: calc((100% - 0.5rem)/2)">
          <div class="text-warning text-center fw-bolder border-bottom border-dark"
            style="height: 2.6rem;line-height: 2.6rem;">
            异常订单
          </div>
          <div ref="abnormallistRef" class="carousel slide overflow-hidden" style="height: calc(100% - 2.6rem);">
            <div class="carousel-inner">
              <div v-for="chunk, index in abnormallistChunk" class="carousel-item" :class="{ 'active': index == 0 }">
                <div v-for="item in chunk" :key="item.documentnumber" class="text-white px-1 py-2 d-flex">
                  <div><svg class="bi text-warning">
                      <use href="#record-fill" />
                    </svg></div>
                  <div class="ms-1">

                    <div>{{item.refdocumentnumber}},{{item.sortationLocationCode!=null?item.sortationLocationCode:'-'}},{{item.notes!=null?item.notes:'-'}}<span v-if="item.workstatus == 'LOST'"
                      class="badge text-bg-warning ms-1">缺件</span></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-indicators carousel-indicators-custom">
              <template v-for="chunk, index in abnormallistChunk">
                <button type="button" :data-bs-slide-to="index" :class="{ 'active': index == 0 }"></button>
              </template>
            </div>
          </div>
        </div>
      </div>

      <div class="col-9" style="height: 100%;">
        <div class="mb-2" style="height: calc((100% - 0.5rem)/2)">
          <div class="row gx-1" style="height: 100%;">
            <div class="col-4 " style="height: 100%;">
              <PieStorageLocUsageSuammryBlock></PieStorageLocUsageSuammryBlock>
            </div>
            <div class="col-4 " style="height: 100%;">
              <BarStorageLocLaneUsageSummaryBlock></BarStorageLocLaneUsageSummaryBlock>
            </div>
            <div class="col-4 " style="height: 100%;">
              <PieStorageMaterialChangeSummaryBlock></PieStorageMaterialChangeSummaryBlock>
            </div>
          </div>
        </div>
        <div class="" style="height: calc((100% - 0.5rem)/2)">
          <BarOrderMonthWorkSummaryBlock></BarOrderMonthWorkSummaryBlock>
        </div>
      </div>

      <!--<div class="col-2" style="height: 100%;">
        <div v-for="item in desklist" class="bgcolor-dark mb-2">
          <div class="text-white px-2 border-bottom border-dark d-flex align-items-center mb-2" style="height: 2.6rem;">
            <span class="fw-bold">工位 {{ item.stationcode }}</span>
            <span v-if="item.workstatus == 'WORK'" class="badge text-bg-success ms-1">工作中</span>
            <span v-if="item.workstatus == 'FREE'" class="badge text-bg-secondary ms-1">离线</span>
            <span v-if="item.workstatus == 'HOLD'" class="badge text-bg-warning ms-1">锁定</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white pb-2">
            <span>当日已完成笔数</span>
            <span>{{ item.fincount }}</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white pb-2">
            <span>当日待完成笔数</span>
            <span>{{ item.workingcount }}</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white pb-2">
            <span>当日效率</span>
            <span>{{ (item.workpercent * 100).toFixed(2) }}%</span>
          </div>
        </div>
      </div>-->
    </div>
  </div>

  <xi-modal v-model="isOpenDocuemttotalModal" title="今日任务" size="xl">
        <DocuemttotalDetail />
    </xi-modal>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import webapi from '@/api/webapi.js';
import { useRouter } from 'vue-router'
import { Carousel } from 'bootstrap';
import { chunk } from 'lodash-es'

import PieStorageLocUsageSuammryBlock from '@/views/pie-storageLocUsageSuammryBlock.vue';
import BarStorageLocLaneUsageSummaryBlock from '@/views/bar-storageLocLaneUsageSummaryBlock.vue';
import PieStorageMaterialChangeSummaryBlock from '@/views/pie-storageTimeSummaryBlock.vue';
import BarOrderMonthWorkSummaryBlock from '@/views/bar-orderMonthWorkSummaryBlock.vue';

import DocuemttotalDetail from './docuemttotal-detail.vue';

import useWarehouseStore from '@/stores/warehouse.js';

const router = useRouter();

const warehouseStore = useWarehouseStore();

const datetimeInfo = ref('');
const warehouse = ref(warehouseStore.getWarehouse());

const worklistRef = ref(null);
const abnormallistRef = ref(null);

const isOpenDocuemttotalModal = ref(false);
onMounted(() => {
  startDatetime();


  setTimeout(() => {
    fetchStorageWarehouseSummary();
  }, 1000);

  setTimeout(() => {
    fetchTransDailySummary();
  }, 1000);

  setTimeout(() => {
    fetchInboundSummary();
  }, 1000);

  setTimeout(() => {
    fetchOutboundSummary();
  }, 2000);

  //作业中订单
  setTimeout(() => {
    var carousel = new Carousel(worklistRef.value, {
      interval: 6000,
      ride: 'carousel',
      touch: false,
      pause: false,
    })
    fetchWorklist(carousel);
  }, 3000);

  //异常订单
  setTimeout(() => {
    var carousel = new Carousel(abnormallistRef.value, {
      interval: 6000,
      ride: 'carousel',
      touch: false,
      pause: false,
    })
    fetchAbnormallist(carousel);
  }, 4000);

  setTimeout(() => {
    fetchDesklist();
  }, 5000);
});



//存储汇总
const storageWarehouseSummaryData = ref({
  divisionid: null,
  total: null,
  workalltotal: null,
  workepaltotal: null,
  freetotal: null
});
function fetchStorageWarehouseSummary() {
  webapi.post('/storage/warehousesummary', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    storageWarehouseSummaryData.value = response.data;
  });

  setTimeout(() => {
    fetchStorageWarehouseSummary();
  }, 10 * 60 * 1000);
}


//任务汇总
const transDailySummaryData = ref({
  docuemttotal: null,
  workfincount: null,
  workholdcount: null,
});
function fetchTransDailySummary() {
  webapi.post('/trans/dailysummary', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    transDailySummaryData.value = response.data;
  });

  setTimeout(() => {
    fetchTransDailySummary();
  }, 10 * 60 * 1000);
}


//入库单汇总
const inboundSummaryData = ref({
  docuemttotal: null,
  workfincount: null,
  workholdcount: null,
});
function fetchInboundSummary() {
  webapi.post('/inbound/summary', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    inboundSummaryData.value = response.data;
  });

  setTimeout(() => {
    fetchInboundSummary();
  }, 10 * 60 * 1000);
}

//出库单汇总
const outboundSummaryData = ref({
  docuemttotal: null,
  docuemtfincount: null,
  docuemtlostcount: null,
  workfincount: null,
  ordercount:null
});
function fetchOutboundSummary() {
  webapi.post('/outbound/summary', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    outboundSummaryData.value = response.data;
  });

  setTimeout(() => {
    fetchOutboundSummary();
  }, 10 * 60 * 1000);
}

//获取作业中订单
const worklistChunk = ref([]);
function fetchWorklist(carousel) {
  webapi.post('/outbound/worklist', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    worklistChunk.value = chunk(response.data, 6);
    carousel.to(0);
  });

  setTimeout(() => {
    fetchWorklist(carousel);
  }, 10 * 60 * 1000);
}

//获取异常订单
const abnormallistChunk = ref([]);
function fetchAbnormallist(carousel) {
  webapi.post('/outbound/abnormallist', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    abnormallistChunk.value = chunk(response.data, 6);
    carousel.to(0);
  });

  setTimeout(() => {
    fetchAbnormallist(carousel);
  }, 10 * 60 * 1000);
}

//工位信息
const desklist = ref([]);
function fetchDesklist() {
  webapi.post('/desk/summary', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    desklist.value = response.data;
  });

  setTimeout(() => {
    fetchDesklist();
  }, 10 * 60 * 1000);
}

function startDatetime() {
  webapi.post('/storage/currenttime', {}).then((response) => {
    datetimeInfo.value = response.data;
  });
  setTimeout(() => {
    startDatetime();
  }, 60*1000);
}

function exit_() {
  warehouseStore.clearWarehouse();
  router.push('/warehouse-select');
}
</script>


<style scoped>
.header-title {
  background: url('@/assets/header-title-bg.png') center no-repeat;
  background-size: 100% 100%;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  font-size: 1.25rem;
  color: #bde4ff;
  letter-spacing: 0.2rem;
}

.header-warehouse {
  left: 0;
  bottom: -0.5rem;
  font-size: 1.25rem;
  color: #bde4ff;
}

.header-time {
  right: 0;
  bottom: -0.5rem;
  font-size: 1.25rem;
  color: #bde4ff;
}

.bgcolor-dark {
  background-color: #1D2B56;
}

.first-text-color{
  color:#0EFCFF
}

.example1 { border: 0.5px solid #ffffff; }


.v-enter-active,
.v-leave-active {
  transition: opacity 2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
